<!--20210524  zaq  操作日志界面,调试完成-->
<template>
  <div style="padding: 0;margin: 0;width: 99%;height: 100%">
    <el-tabs type="border-card"
             style="height: 100%;
             background-color: rgba(255,255,255,0.2);
             padding: 0;margin: 0;width: 99%;height: 100%"

    >
      <el-tab-pane label="操作日志" style="height: 100%">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="选择日期：">

            <el-date-picker
                v-model="date"
                align="right"
                type="date"
                placeholder="选择日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="select">查询</el-button>
          </el-form-item>
        </el-form>


        <el-table
            height="550"
            :data="logs"
            stripe
            style="width: 100%;font-size: 10px">
          <el-table-column
              prop="uId"
              label="用户ID"
              width="60px"
          >
          </el-table-column>
          <el-table-column
              prop="lTable"
              label="操作表名"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="lDate"
              label="操作日期"
              width="100px"
              :formatter="dateFormat"
          >
          </el-table-column>
          <el-table-column
              prop="lTime"
              label="操作时间"
              width="100px"
              :formatter="timeFormat"
          >
          </el-table-column>
          <el-table-column
              prop="lDetail"
              label="具体操作"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="lText"
              label="备注">
          </el-table-column>
        </el-table>

        <!--  分页-->
          <div >
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                v-model:currentPage="page"
                :page-size="pageSize"
                layout="prev, pager, next, jumper"
                :total="count">
            </el-pagination>
          </div>


      </el-tab-pane>

      <el-tab-pane label="用户信息" style="height: 100%">
        <el-form inline>
          <el-form-item>
            <el-button @click="getUsers">刷新</el-button>
          </el-form-item>
        </el-form>
        <el-table
            height="550"
            :data="users"
            stripe
            style="width: 100%;font-size: 10px">
          <el-table-column
              prop="uId"
              label="用户ID"
              width="160px"
          >
          </el-table-column>
          <el-table-column
              prop="uLogin"
              label="用户名"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="uCreatedate"
              label="创建日期"
              width="200px"
              :formatter="getDate"
          >
          </el-table-column>
          <el-table-column
              prop="delete"
              label="状态"
              width="200px"
              :formatter="getStatus"
          >
          </el-table-column>
        </el-table>



      </el-tab-pane>

    </el-tabs>


  </div>

</template>

<script>
import {getCountLog_0000} from "../api";
import {getLog_0000} from "../api";
import {getAllUser_0000} from "../api";
import moment from "moment";

export default {
  name: "Log",
  data(){
    return{
      users:null,
      count:-1,
      log:{
        count:0,
        page:1,
        lId:-1,
        uId:-1,
        lTable:'',
        lDate:'2021-5-23',
        lTime:'',
        lDetail:'',
        lText:''
      },
      logs:null,
      // logs:[{
        // count:0,
        // page:1,
        // lId:-1,
        // uId:-1,
        // lTable:'',
        // lDate:'2021-5-23',
        // lTime:'',
        // lDetail:'',
        // lText:''
      // }],
      pageSize:7,
      disabledDate(time) {
        return time.getTime() > Date.now()
      },
      shortcuts: [{
        text: '今天',
        value: new Date(),
      }, {
        text: '昨天',
        value: (() => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24)
          return date
        })(),
      }, {
        text: '上周',
        value: (() => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
          return date
        })(),
      }],
      date: new Date(),
      page:'',
    }
  },
  created() {
    const _this=this
    var body={
      lId:-1,
      uId:-1,
      lTable:'',
      lDate:this.date,
      lTime:'',
      lDetail:'',
      lText:''
    }
    getCountLog_0000(body).then(resp=>{
      console.log("count:"+resp)
      _this.count=resp
      _this.getUsers()
    }).catch(error=>{
      console.log("error:"+error)
    })
  },
  methods:{
    getStatus(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc == true) {
        return '注销';
      }else{
        return '正常';
      }
    },
    getDate(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var str=daterc.toString()
        var yyyy=str.substr(0,4)
        var mm=str.substr(4,2)
        var dd=str.substr(6,2)
        var create=''+yyyy+'-'+mm+'-'+dd
        return create
      }
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var date=moment(daterc).format('yyyy-MM-DD');
        // const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
        // const year = dateMat.getFullYear();
        // const month = dateMat.getMonth() + 1;
        // const day = dateMat.getDate();
        // const hh = dateMat.getHours();
        // const mm = dateMat.getMinutes();
        // const ss = dateMat.getSeconds();
        // const timeFormat = year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
        return date;
      }
    },
    timeFormat(row, column, cellValue, index) {
      const daterc = row[column.property]
      if (daterc != null) {
        var date=moment(daterc).format('HH : mm :ss');
        // const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
        // const year = dateMat.getFullYear();
        // const month = dateMat.getMonth() + 1;
        // const day = dateMat.getDate();
        // const hh = dateMat.getHours();
        // const mm = dateMat.getMinutes();
        // const ss = dateMat.getSeconds();
        // const timeFormat = year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
        return date;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getAll()
    },
    select(){
      const _this=this
      var body={
        lId:-1,
        uId:-1,
        lTable:'',
        lDate:this.date,
        lTime:'',
        lDetail:'',
        lText:''
      }
      getCountLog_0000(body).then(resp=>{
        console.log("count:"+resp)
        _this.count=resp
        if(resp<7){
          _this.pageSize=resp
        }else{
          _this.pageSize=7
        }
        _this.page=1
        _this.getAll()
      }).catch(error=>{
        console.log("error:"+error)
      })
    },
    getAll(){
      const _this=this
      var body={
        page:(this.page-1)*this.pageSize,
        lId:-1,
        uId:-1,
        lTable:'',
        lDate:this.date,
        lTime:'',
        lDetail:'',
        lText:''
      }
      console.log("page:"+body.page)
      getLog_0000(body).then(resp=>{
        this.logs=resp
      }).catch(error=>{
        console.log("error:"+error)
      })
    },
    getUsers(){
      const _this=this
      getAllUser_0000().then(resp=>{
        _this.users=resp
      }).catch(err=>{
        console.log("调用接口失败:"+err)
      })
    }
  }
}
</script>

<style scoped>

</style>